<template>
	<view class="foor-item" >
		<view class="item-wrap" @click="toDetail(floorItem.id)" >
			<view class="images-wrap">
				<image :src="floorItem.image.src" mode="widthFix"></image>
			</view>
			<view class="text">
				{{ floorItem.name }}
			</view>
			<view class="price">
				￥{{ floorItem.price }}
			</view>
			<view class="detail">
				<view class="user">
					<image :src="floorItem.sellerAvatar" mode=""></image>
				</view>
				<view class="username">
					{{ floorItem.sellerName }}
				</view>
				<view class="read-num">
					{{ floorItem.readNum }}人看过
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
		   floorItem:{
			   default:{
				   userImg:"",
				   username:"",
				   text:"",
				   price:111,
				   readNum:111,
				   goodsImg:""
			   }
		   }
		},
		methods: {
			toDetail(id){
				uni.navigateTo({
					url:`/pages/detail/detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="less">
  .foor-item {
  	width: 44vw;
  	padding: 10rpx;
  	height: 100%;
  	
  	.item-wrap {
  		width: 100%;
  		display: flex;
  		flex-direction: column;
  		// justify-content: left;
  		background-color: #fff;
		box-shadow: -2rpx -2rpx 2rpx rgb(209, 209, 209) inset;
		border-radius: 20rpx;
		
  		padding: 15rpx;
  		// padding-top: 0;
  		border-radius: 30rpx;
  		overflow: hidden;
  		
  		// 图片
  		.images-wrap {
  			width: 100%;
  
  			image {
  				width: 100%;
  			}
  		}
  		
  		
  		// 文本
  		.text{
  			font-size: 32rpx;
  			width: 100%;
  			overflow: hidden;
  			text-overflow: ellipsis;
  			white-space: nowrap;
  			
  		}
  		.text:hover{
			
  			color: #5ca45b;
  		}
  		// 价格
  		.price{
  			color: #ff5500;
  		}
  		
  		// 更多信息
  		.detail{
  			display: flex;
  			flex-direction: row;
  			// justify-content: space-between;
  			
  			.user{
  				width: 36rpx;
  				height: 36rpx;
				border-radius: 36rpx;
				overflow: hidden;
  				image{
  					width: 100%;
  					height: 100%;
  				}
  			}
  			
  			.username{
  				height: 36rpx;
  				max-width: 200rpx;
				padding: 0 15rpx;
				margin-right: 50rpx;
  				display: flex;
  				font-size: 20rpx;
  				align-items: center;
  				color: #5ca45b;
  				overflow: hidden;
  				  text-overflow: ellipsis;
  				  white-space: nowrap;
  			}
  			
  			.read-num{
				width: 150rpx;
  				display: flex;
  				color: #808080 ;
  				align-items: center;
  				font-size: 20rpx;
  			}
  		}
  	}
  }
</style>
